<template>
  <div class="vip_meal">
    <div class="vipMealMainBg":style="{'background':'url('+require('@/assets/img/vip/t_bg.png')+') no-repeat center center','backgroundSize':'cover'}">
          <h2>
            扩充抠图下载量 工作提效超省力
          </h2>
          <ul class="vipMealMain">
            <!-- <li class="regCard">
              <div class="t">
                <h4>
                  注册即可
                </h4>
                <h2>
                  免费预览，开启全新体验
                </h2>
              </div>

              <ul class="m">
                <li>
                  <img src="@/assets/img/vip/litu_00.svg" >
                  <span>
                    抠图效果在线预览，作品满意再下载
                  </span>
                </li>
                <li>
                  <img src="@/assets/img/vip/litu_01.svg" >
                  <span>
                    一键上传自动识别，获取高分辨率图像
                  </span>
                </li>
                <li>
                  <img src="@/assets/img/vip/litu_02.svg" >
                  <span>
                    批量抠图，证件照换背景专业快捷
                  </span>
                </li>
                <li>
                  <img src="@/assets/img/vip/litu_03.svg" >
                  <span>
                    滤镜、精剪、阴影等功能无限使用
                  </span>
                </li>
              </ul>

              <div class="regCardBtn">
                免费注册
              </div>

            </li> -->
           <li v-for="(vipMealIt,vipMealIdx) in vipMealArr" :key="'vipMealIt_0'+vipMealIdx" class="yueCard">
             <div class="inpTop">

              <h2>
                {{vipMealIt.name}}
              </h2>
              <div class="txt_00">
               <!-- <strong>每张</strong> -->
                <span>
                   {{vipMealIt.money}}
                </span>
                <strong>元</strong>
              </div>

              <ul class="regCard_m">
                <li v-for="(vipMeBaIt,vipMeBaIdx) in vipMealIt.badge" :key="'vipMeBaIt_0'+vipMeBaIdx">
                  <img src="@/assets/img/vip/litu_00.svg" >
                  <span>
                    {{vipMeBaIt}}
                  </span>
                </li>

              </ul>

              <div class="regCard_b_txt">
                {{vipMealIt.description}}
              </div>

              <!-- <ul class="txt_It">
                <li>
                  <input name="inp_radio_00" type="radio" id="s_00">
                  <label for="s_00">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_00" type="radio" id="s_01">
                  <label for="s_01">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_00" type="radio" id="s_02">
                  <label for="s_02">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_00" type="radio" id="s_03">
                  <label for="s_03">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_00" type="radio" id="s_04">
                  <label for="s_04">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_00" type="radio" id="s_05">
                  <label for="s_05">
                    <span class="left">
                      <span>
                        每月10张
                      </span>
                      <strong class="tag">
                        限时特惠
                      </strong>
                    </span>
                    <strong class="right">
                      <span>
                        9.9
                      </span>
                      <b>
                        0.99元/张
                      </b>
                    </strong>
                  </label>
                </li>


              </ul> -->
             </div>

              <div class="yueBot_00">
                <!-- <div class="t">
                  <div class="radio">
                    <input v-model="picked" value="one" type="radio" id="yue_00" name="feiRadio"/>
                    <label for="yue_00">
                      <span>
                        按月付费
                      </span>
                    </label>
                  </div>
                  <div class="radio">
                    <input v-model="picked" value="two" type="radio" id="yue_01" name="feiRadio"/>
                    <label for="yue_01">
                      <span>
                        按年付费
                      </span>
                      <b>
                        节省20.00%
                      </b>
                    </label>
                  </div>
                </div> -->
                <div @click="goBuyVip(vipMealIt)" class="m">
                  立即购买
                </div>
                <!-- <div class="b">
                  <span v-if="picked=='one'">
                    需支付 39 元，按年付费可省 ¥93.60/年
                  </span>
                  <span v-else>
                    需支付¥374.4（月费¥39*12个月*0.80）
                  </span>
                </div> -->
              </div>

            </li>

            <li v-for="(bloIt,bloIdx) in (3 - vipMealArr.length%3)" class="vipBlock" style="opacity: 0;"></li>

            <!-- <li class="yueCard">
              <div class="inpTop">
              <h2>
                包月套餐，更优惠
              </h2>
              <div class="txt_00">
                <strong>每张</strong>
                <span>
                  0.39
                </span>
                <strong>元</strong>
              </div>
              <ul class="txt_It">
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_00">
                  <label for="s1_00">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_01">
                  <label for="s1_01">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_02">
                  <label for="s1_02">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_03">
                  <label for="s1_03">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_04">
                  <label for="s1_04">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>
                <li>
                  <input name="inp_radio_01" type="radio" id="s1_05">
                  <label for="s1_05">
                    <span class="left">
                      <span>
                        5张
                      </span>
                    </span>
                    <strong class="right">
                      <span>
                        7.5
                      </span>
                      <b>
                        1.50元/张
                      </b>
                    </strong>
                  </label>
                </li>

              </ul>



              </div>
              <div class="yueBot_00">

                <div class="m">
                  立即购买
                </div>
                <div class="b">
                  <span>
                    需支付 49 元，永久可用
                  </span>
                </div>
              </div>

            </li> -->
          </ul>
    </div>

    <!-- <div class="vip_box_00Bg">

      <div class="tit">
        稿定抠图，提供更好的服务
      </div>

    </div> -->

  </div>
</template>

<script>
  // 仿https://koutu.gaoding.com/pricing
  export default{
    data(){
      return{
        picked:"one",
        vipMealArr:[]
      }
    },
    mounted() {
      let that=this;
      that.getVipFn();
    },
    methods:{

      goBuyVip(v_ipInfo){
        this.$parent.opVipPopFb(v_ipInfo,true);

      },

      getVipFn(){
        let that=this;

        this.$request.get(
          "/recharge/vip"
        ).then((res)=>{
         	console.log("vip套餐请求成功：",res);

          that.vipMealArr=res.data.data;

         })
         .catch((err)=>{
         	console.log("vip套餐请求失败：",err);
         });

      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .vipMealMainBg{
    padding: 100px 0;
    >h2{
      color: #fff;
      text-align: center;
          font-size: 48px;
          line-height: 48px;
          font-weight: 700;
    }

    .vipMealMain{
      width: 1200px;
      margin: 50px auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      >li{
        background: #fff;
        width: 320px;
        min-height: 600px;
        padding: 34px 27px 34px;
        border-radius: 14px;
        margin-bottom: 20px;
      }

      .yueCard{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .inpTop{
            >h2{
                  text-align: center;
                  font-weight: 600;
                  font-size: 30px;
                  line-height: 42px;
                  color: #33383e;
            }

          }
          .txt_00{
            color: rgb(34, 84, 244);
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: flex-end;
            margin-top: 35px;
            strong{
              display: block;
                  font-size: 16px;
                  line-height: 16px;
            }
            span{
              display: block;
              font-size: 52px;
              line-height: 33px;
              font-weight: bolder;
            }
          }

          .txt_It{
              overflow: hidden;
              margin-top: 15px;
            li{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              margin-top: 28px;
              input[type="radio"]{
                display: block;
                width: 15px;
                height: 15px;
              }
              label{
                display: block;
                width: 298px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                cursor: pointer;
                .left{
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  cursor: pointer;
                  span{
                        font-size: 16px;
                        line-height: 22px;
                        color: #33383e;
                        display: block;
                        height: 22px;
                  }
                  .tag{
                    font-weight: normal;
                        margin-left: 6px;
                        padding: 2px 4px;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 18px;
                        color: #f54531;
                        background: rgba(245,69,49,.06);
                        border-radius: 4px;
                  }
                }

                .right{
                  display: block;
                  font-weight: normal;
                  display: flex;
                  cursor: pointer;
                  flex-direction: row;
                  span{

                          font-size: 16px;
                          line-height: 22px;
                          color: #33383e;
                          display: block;
                          height: 22px;
                  }
                  b{
                    font-weight: normal;
                        font-size: 16px;
                        line-height: 22px;
                        color: #33383e;
                        display: block;
                        height: 22px;
                        margin-left: 10px;
                  }
                }
              }
            }
          }
          .yueBot_00{
            .t{
              display: flex;
              flex-direction: row;
              margin-bottom: 10px;
              .radio{
                margin-right: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                input[type="radio"]{
                  display: block;
                  width: 15px;
                  height: 15px;
                  cursor: pointer;
                }
                label{
                  cursor: pointer;
                  font-size: 16px;
                        line-height: 22px;
                        color: #33383e;
                        display: block;
                        height: 22px;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: row;
                        b{
                          color: #f54531;
                          margin-left: 6px;
                          font-weight: normal;
                        }
                }
              }
            }
            .m{
                  height: 48px;
                  color: #fff;
                  border-radius: 4px;
                  background-color: rgb(34, 84, 244);
                  cursor: pointer;
                  text-align: center;
                      font-weight: 500;
                      font-size: 16px;
                      line-height:  48px;
            }
            .b{
              margin-top:8px;
              span{
                    text-align: center;
                    font-weight: 500;
                    display: block;
                    font-size: 16px;
                    line-height: 20px;
                        color: #7f8792;
              }
            }
          }

        }

    }
      .regCard{
        .t{
          h4{
                margin-bottom: 4px;
                font-weight: 600;
                font-size: 24px;
                line-height: 34px;
                color: #33383e;
                text-align: center;
          }
          h2{
                color: rgb(34, 84, 244);
                    text-align: center;
                    white-space: nowrap;
                    font-weight: 600;
                    font-size: 25px;
                    line-height: 35px;
          }
        }


        .regCardBtn{
              width: 281px;
              height: 48px;
              cursor: pointer;
              font-weight: 600;
              font-size: 16px;
              margin:30px auto 0;
              line-height: 48px;
              color: #2254f4;
              border-radius: 4px;
              border: 1px solid #2254f4;
              text-align: center;
          }

      }

  }

    .tit{
          color: #434951;
          margin-bottom: 96px;
          font-size: 46px;
              font-weight: 700;
              text-align: center;
              line-height: 58px;
    }

  .vip_box_00Bg{
    padding: 100px 0;
  }

.regCard_b_txt{
  text-align: center;
  font-size: 15px;
  text-align: center;
  line-height: 22px;
}

.regCard_m{
          margin-top: 40px;
          li{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 18px;
            img{
              display: block;
              width: 48px;
              height: 48px;
              margin-bottom: 6px;
            }
            span{
              display: block;
                  margin-top: 6px;
                  font-weight: 500;
                  font-size: 16px;
                  line-height: 22px;
                  color: #33383e;
                  text-align: center;
            }
          }
        }


@media screen and (max-width:1450px) and (min-width:768px){
  .vip_meal{
    .vipMealMainBg{
      padding: 50px 0;
      >h2{
        padding: 0 30px;
        font-size: 28px;
        line-height: 40px;
      }
      .vipMealMain{
        width: auto;
        justify-content: center;
        li{
          margin: 25px 5px;
          width: 270px;
          label{
            max-width: 270px;
            width: auto;
          }
        }

        .vipBlock{
          display: none;
        }
      }
    }
  }
}


@media screen and (max-width:767px){
  .vip_meal{
    .vipMealMainBg{
      padding: 50px 0;
      >h2{
        padding: 0 30px;
        font-size: 28px;
        line-height: 40px;
      }
      .vipMealMain{
        width: auto;
        flex-direction: column;
        align-items: center;
        li{
          margin: 25px 0;
          width: 270px;
          label{
            max-width: 270px;
            width: auto;
          }
        }

        .vipBlock{
          display: none;
        }
      }
    }
  }
}

</style>
